<template>
    <div class="main-page">
        <dv-border-box-7>
            <div class="content-box">
                <Row type="flex" justify="center" align="middle" class-name="top-box">
<!--                    <Col class="top-box-content">-->
<!--                        数据分析-->
<!--                    </Col>-->
                    <Col>
                        <dv-decoration-7 style="width:300px;height:40px;">
                            &nbsp;&nbsp;数据分析&nbsp;&nbsp;
                        </dv-decoration-7>
<!--                        <dv-decoration-5 style="width:300px;height:40px;"/>-->
                    </Col>
                </Row>
                <div class="ivu-row">
                    <div class="ivu-col ivu-col-span-8">
                        <div style="background:#00cc66" class="ivu-card">
                            <div class="ivu-card-body">
                                <div class="demo-color-name">企业数</div>
                                <div class="demo-color-desc">{{qiye}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="ivu-col ivu-col-span-8">
                        <div style="background:#3399ff" class="ivu-card">
                            <div class="ivu-card-body">
                                <div class="demo-color-name">档案数</div>
                                <div class="demo-color-desc">{{dangan}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="ivu-col ivu-col-span-8">
                        <div style="background:#ff9900" class="ivu-card">
                            <div class="ivu-card-body">
                                <div class="demo-color-name">接收机构</div>
                                <div class="demo-color-desc">{{jieshoujigou}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <Row class-name="bottom-box">
                    <Col span="8">
                        <types-pillar-echart-statistics :width="echartWidth" :height="350"></types-pillar-echart-statistics>
                    </Col>
                    <Col span="8">
                        <types-pie-echart-one :width="echartWidth" :height="350"></types-pie-echart-one>
                    </Col>
                    <Col span="8">
                        <types-pie-echart-two :width="echartWidth" :height="350"></types-pie-echart-two>
                    </Col>
                </Row>
            </div>
        </dv-border-box-7>
    </div>
</template>

<script>
import TypesPillarEchartStatistics from '@/components/echarts/types-pillar-echart-statistics/index'
import TypesPieEchartOne from '@/components/echarts/types-pie-echart-one/index'
import TypesPieEchartTwo from '@/components/echarts/types-pie-echart-two/index'
import { findDAList, findOfficeReport } from '@/api/record'
export default {
  components: {
    TypesPieEchartOne,
    TypesPieEchartTwo,
    TypesPillarEchartStatistics
  },
  data () {
    return {
      echartWidth: (document.documentElement.clientWidth - 300) / 3,
      echartHeight: (document.documentElement.clientHeight - 330) / 2,
      qiye: 0,
      jieshoujigou: 0,
      dangan: 0
    }
  },
  mounted () {
    this.init()
    // this.$router.push({ path: '/record/list' })
  },
  methods: {
    init () {
      findDAList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dangan = ret.data.data
        } else {
          this.$Message.error({
            content: '数据获取失败,\n' + ret.data.errmsg
          })
        }
      })
      findOfficeReport().then(ret => {
        if (ret.data.errcode === 0) {
          for (let i = 0; i < ret.data.data.length; i++) {
            if (ret.data.data[i].company_type === '1') {
              this.qiye = ret.data.data[i].total_count
            }
            if (ret.data.data[i].company_type === '2') {
              this.jieshoujigou = ret.data.data[i].total_count
            }
          }
        } else {
          this.$Message.error({
            content: '数据获取失败,\n' + ret.data.errmsg
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
    .ivu-col.ivu-col-span-8 {
        padding-right: 10px;
        color: #ffffff;
    }
    .main-page {
        /*background-color: #3AB0FA;*/
        height: 100%;

        .content-box {
            padding: 20px;
            height: 100%;

            .top-box {
                flex-direction: column;
                margin-bottom: 20px;

                .top-box-content {
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: -15px;
                }
            }

            .bottom-box {
                margin-top: 2%;
            }
        }
    }
</style>
